<template>
  <Grid :col="4" :border="false" padding="5px">

    <GridItem>
      <Button v-auth:menu:add icon="md-add-circle" type="primary" @click="$emit('open-add-menu')" style="margin-right: 5px">添加菜单</Button>
      <Button v-auth:menu:batch:del label="default" type="error" @click="$emit('batch-delete')">
        <Icon type="ios-remove-circle-outline"  />批量删除
      </Button>
    </GridItem>

    <GridItem><Input placeholder="请输入菜单名" v-model="search.name"/></GridItem>
    <GridItem>
      <Select style="width:100%" clearable v-model="search.state" placeholder="请选择菜单的状态">
        <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </GridItem>
    <GridItem><Button v-auth:menu:query icon="md-search" type="primary" @click="handlerSearch">查询</Button></GridItem>
  </Grid>
</template>

<script>

export default {
  props: {
    modelValue: {
       type: Object,
       required: true
    }
  },
  data() {
    return {
      search: {...this.modelValue } ,
      statusList: [{label: '正常',  value: 1},  {label: '失效', value : 0}]
    }
  },
  emits: ['open-add-menu', 'update:modelValue', "batch-delete"] ,
  methods: {
    handlerSearch() {
       this.$emit("update:modelValue", {...this.search}) ;
       this.$emit("search") ;
    }
  }
}

</script>

<style>
</style>